<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />

	</head>
	<body>
		<div class="progress"></div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			window.addEventListener("load", function() {
				var lis = document.querySelectorAll("li");


				// setInterval(function(){
				var i = 0;
				// },4000)
				lis[i].classList.add("active");

				setInterval(function() {
					// 方法1
					// if (i == 3) {
					// 	i = 0;
					// 	lis[0].classList.add("active");
					// 	lis[3].classList.remove("active");
					// } else {
					// 	lis[i].classList.remove("active");
					// 	lis[i + 1].classList.add("active");
					// 	i++;
					// }
					// 方法2
					lis[i].classList.remove("active");
					(++ i== lis.length) && (i = 0);
					lis[i].classList.add("active");
				}, 4000)
			})
		</script>
	</body>
</html>
